<template>
    <el-form ref="formRef" :model="storage" label-width="100px" v-loading="configLoading">
        <el-form-item :label="$t('storage.type')">
            <el-radio-group v-model="storage.type">
                <el-radio v-for="engine in storageEngines" :key="engine.label" :label="engine.label" border>{{ engine.name }}</el-radio>
            </el-radio-group>
        </el-form-item>
        <template v-for="engine in storageEngines" :key="engine.label">
            <el-card shadow="always" v-if="storage.type === engine.label">
                <el-card shadow="never" class="storage-info">
                    <div class="info-container">
                        <span class="info-title" v-html="engine.info"></span>
                        <span class="info-details" v-html="engine.details"></span>
                    </div>
                </el-card>
                <el-form-item :label="$t('storage.nameType')">
                    <el-radio-group v-model="storage.name_type">
                        <el-radio label="xmd5" border>{{ $t('storage.xmd5') }}</el-radio>
                        <el-radio label="date" border>{{ $t('storage.date') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('storage.linkType')">
                    <el-radio-group v-model="storage.link_type">
                        <el-radio label="none" border>{{ $t('storage.none') }}</el-radio>
                        <el-radio label="full" border>{{ $t('storage.full') }}</el-radio>
                        <el-radio label="none+compress" border>{{ $t('storage.noneCompress') }}</el-radio>
                        <el-radio label="full+compress" border>{{ $t('storage.fullCompress') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('storage.allowExts')">
                    <el-input v-model="storage.allow_exts" clearable></el-input>
                </el-form-item>
                <component :is="storageComponent.component" :http_protocols="storageComponent.props" @update-storage="handleStorageUpdate"></component>
                <el-form-item>
                    <el-button type="primary" @click="submit">{{ $t('common.save') }}</el-button>
                </el-form-item>
            </el-card>
        </template>
    </el-form>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { useStore } from 'vuex';
import api from '@/api';
import i18n from '@/locales';
import { ElMessage } from 'element-plus';
// 导入各种存储配置组件
import LocalStorage from './localStorage.vue';
import AlistStorage from './alistStorage.vue';
import QiniuStorage from './qiniuStorage.vue';
import UssStorage from './ussStorage.vue';
import OssStorage from './ossStorage.vue';
import CosStorage from './cosStorage.vue';
// 使用 Vuex store
const store = useStore();
// 表单引用
const formRef = ref(null);
// 加载状态
const configLoading = ref(false);
// 存储引擎配置数组
const storageEngines = computed(() => [
    { name: i18n.global.t('storage.local'), label: 'local', info: i18n.global.t('storage.localInfo'), details: i18n.global.t('storage.localDetail') },
    { name: i18n.global.t('storage.alist'), label: 'alist', info: i18n.global.t('storage.alistInfo'), details: i18n.global.t('storage.alistDetail') },
    { name: i18n.global.t('storage.qiniu'), label: 'qiniu', info: i18n.global.t('storage.qiniuInfo'), details: i18n.global.t('storage.qiniuDetail') },
    { name: i18n.global.t('storage.uss'), label: 'uss', info: i18n.global.t('storage.ussInfo'), details: i18n.global.t('storage.ussDetail') },
    { name: i18n.global.t('storage.oss'), label: 'oss', info: i18n.global.t('storage.ossInfo'), details: i18n.global.t('storage.ossDetail') },
    { name: i18n.global.t('storage.cos'), label: 'cos', info: i18n.global.t('storage.cosInfo'), details: i18n.global.t('storage.cosDetail') },
]);
// 存储配置的响应式对象
const storage = reactive({
    type: store.state.system.storage.type || 'local',
    name_type: store.state.system.storage.name_type,
    link_type: store.state.system.storage.link_type,
    allow_exts: store.state.system.storage.allow_exts,
});
// 存储组件映射
const storageComponents = {
    local: LocalStorage,
    alist: AlistStorage,
    qiniu: QiniuStorage,
    uss: UssStorage,
    oss: OssStorage,
    cos: CosStorage
};
// HTTP协议配置
const local_http_protocols = [{ title: "FOLLOW", value: "follow", }, { title: "HTTP", value: "http", }, { title: "HTTPS", value: "https", }, { title: "PATH", value: "path", }, { title: "AUTO", value: "auto", },];
const other_http_protocols = [{ title: "HTTP", value: "http", }, { title: "HTTPS", value: "https", }, { title: "AUTO", value: "auto", },];
// 根据存储类型计算要加载的组件及其props
const storageComponent = computed(() => {
    const props = storage.type === 'local' ? local_http_protocols : other_http_protocols;
    return {
        component: storageComponents[storage.type],
        props,
    };
});
// 更新存储配置
const updateStorageForType = (type, newData) => {
    // 清除旧的特定属性
    Object.keys(storage).forEach(key => {
        if (!['type', 'name_type', 'link_type', 'allow_exts'].includes(key)) {
            delete storage[key];
        }
    });
    // 添加新的特定属性
    Object.assign(storage, newData);
};
// 监听存储类型变化，重置存储配置
watch(() => storage.type, (newType) => {
    updateStorageForType(newType, {});
});
watch(
    () => store.state.system.storage.type,
    (newType) => {
        storage.type = newType;
        storage.name_type = store.state.system.storage.name_type;
        storage.link_type = store.state.system.storage.link_type;
        storage.allow_exts = store.state.system.storage.allow_exts;
    }
);
// 处理子组件更新事件
const handleStorageUpdate = (updatedStorage) => {
    updateStorageForType(storage.type, updatedStorage);
};
// 提交函数，处理表单提交逻辑
const submit = async() => {
    configLoading.value = true;
    try {
        const res = await api.setting.system.save.post(storage);
        if (res.code == 200) {
            ElMessage.success(res.message);
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {
        console.error('Error in setting/system/components/localStorage/submit action:', error);
    } finally {
        configLoading.value = false;
    }
};
</script>
<style scoped>
.storage-info {
    background-color: #f3f4f6;
    margin-bottom: 18px;
}

.info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.info-details {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}
</style>